<template>
  <div class="layout-all">
    <control :config="config" />
    <div class="layout-header" style="float: left">
      <router-link to="./cat_form/">
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 0px"
          >添加</el-button
        >
      </router-link>
    </div>
    <div class="layout-content">
      <el-table
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%; margin-top: 50px"
      >
      <el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
        <el-table-column align="left" prop="name" label="分类名称" />
        <el-table-column align="center" prop="level" label="等级" width="80"/>
        <el-table-column
          align="center"
          prop="sort_order"
          label="排序"
          width="120"
        />
        <el-table-column prop="is_show" label="状态" width="80">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.is_show === 1 ? 'primary' : 'success'"
              size="mini"
              @click="change_status(scope.row.id, 'is_show', scope.row.is_show)"
              >{{ scope.row.is_show === 1 ? "是" : "否" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="telephone"
          :fixed="isMobile()?undefined:'right'"
          width="240"
          label="操作"
        >
          <template slot-scope="scope">
            <router-link :to="'./cat_form/' + scope.row.id">
              <el-button size="small" type="primary" icon="el-icon-edit" />
            </router-link>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="onDel(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import control from "../../components/control/control";
export default {
    name:"video_cat_index",
  components: { control },
  data() {
    return {
      config: [
        {
          type: "text",
          placeholder: "请输入分类名称",
          field: "name",
          val: "",
        },
      ],
      value: "",
      searchWhere: {
        name: "",
      },
      tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14,
    };
  },
  activated(){
    if(this.$getUpdate()){
      this.onSearch()
    }
  },
  created() {
    this.onSearch()
  },
  methods: {
    // 查询
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    onSearch() {
      const form = {};
      form.page = this.current_page;
      form.map = this.searchWhere;
      this.get("/admin/VideoCat/index", form, "POST").then((e) => {
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
        console.log(this.tableData);
      });
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      console.log(id);
    },
    // 修改状态
    change_status(id, field, val) {
      this.update(id, val, field, "VideoCat").then((e) => {
        e ? this.onSearch() : "";
      });
    },
    // 删除
    onDel(id) {
      this.$msg_confirm().then((e) => {
        if (e) {
          this.get("/admin/VideoCat/del?id=" + id, this.form, "POST").then(
            (e) => {
              this.onSearch();
            }
          );
        }
      });
    },
  },
};
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
</style>>
